<template>
    <div>
        <el-tabs type="border-card">

            <el-tab-pane label="全部">
                <div v-if="seek">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">

                        <el-form-item label="班级">
                            <el-input v-model="formInline.classandgrade" placeholder="班级"></el-input>
                        </el-form-item>

                        <el-form-item label="用户ID">
                            <el-input v-model="formInline.userid" placeholder="用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-input v-model="formInline.img" placeholder="头像"></el-input>
                        </el-form-item>

                        <el-form-item label="姓名">
                            <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-input v-model="formInline.sex" placeholder="性别"></el-input>
                        </el-form-item>
                        <el-form-item label="审核状态">
                            <el-select v-model="formInline.show" placeholder="选择">
                                <!-- <el-option label="选择" value="选择"></el-option> -->
                                <el-option label="待审批" value="0"></el-option>
                                <el-option label="通过" value="100"></el-option>
                                <el-option label="不通过" value="404"></el-option>

                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="所在班级">
                            <el-input v-model="formInline.The_class" placeholder="所在班级"></el-input>
                        </el-form-item> -->
                        <br />

                        <el-form-item>
                            <el-button type="success" @click="inquire" style="background-color: #18bc9c;">提交</el-button>
                            <el-button type="info" @click="replacement"
                                style="background-color: #f4f4f4;color: black;">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>


                <el-button type="info" :loading="true" size="small"></el-button>
                <el-button type="success" icon="el-icon-plus" size="small" style="background-color: #18bc9c;"
                    @click="dialogVisible = true">添加</el-button>
                <el-button type="success" icon="el-icon-edit" size="small" disabled>编辑</el-button>

                <el-button type="danger" icon="el-icon-delete-solid" size="small">删除</el-button>

                <el-button type="info" icon="el-icon-search" plain style="float: right" @click="seek = !seek"
                    size="small"></el-button>
                <el-button-group style="float: right">
                    <el-button type="info" icon="el-icon-s-order" plain size="small" @click="seeks = !seeks"></el-button>

                    <el-button type="info" plain size="small"><el-popover placement="bottom" title="筛选列" trigger="click"
                            width="40">
                            <el-checkbox-group v-model="checkedColumns" size="small">
                                <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item"
                                    :value="item"></el-checkbox>
                            </el-checkbox-group>
                            <div title="筛选列" class="filter-table-col" slot="reference">
                                <i class="el-icon-s-grid"> </i>
                            </div>
                        </el-popover></el-button>
                    <el-button type="info" icon="el-icon-upload2" plain size="small" trigger="click">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>JSON</el-dropdown-item>
                                <el-dropdown-item>CSV</el-dropdown-item>
                                <el-dropdown-item>TXT</el-dropdown-item>
                                <el-dropdown-item>MS-Word</el-dropdown-item>
                                <el-dropdown-item>MS-Excel</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-button>
                </el-button-group>
                <el-input placeholder="搜索" v-model="input" clearable style="width: 195px; float: right" size="small"
                    @change="search(input)">
                </el-input>


                <div v-if="seeks">

                    <div>用户ID</div>
                    <div>头像</div>
                    <div>姓名</div>
                    <div>手机号</div>
                    <div>性别</div>
                    <div>审核状态</div>
                    <div>所在班级</div>
                    <div>操作</div>

                </div>
                <!-- 表格 -->
                <div class="tableDemo">
                    <el-table :data="tableData.slice(
                        (currentPage - 1) * pagesize,
                        currentPage * pagesize
                    )
                        " style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" align="center"> </el-table-column>
                        <!-- 对数据的处理，最最最重要的一句话 -->
                        <el-table-column v-if="colData[0].istrue" prop="id" label="用户ID" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[1].istrue" prop="classandgrade" label="班级" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[2].istrue" prop="img" label="头像" align="center">
                            <template slot-scope="scope">
                                <el-image style="width: 50px; height: 50px" :src="scope.row.img"
                                    :preview-src-list="[scope.row.img]"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[3].istrue" prop="name" label="姓名" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[4].istrue" prop="phone" label="手机号" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[5].istrue" prop="sex" label="性别" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[6].istrue" prop="show" label="审核状态" sortable align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.show" active-color="#18bc9c" inactive-color="#d2d6de"
                                    active-value="100" inactive-value="0">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[7].istrue" prop="The_class" label="所在班级" sortable align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row.id)" class="el-icon-view"
                                    style="background-color: #18bc9c;color: #fff;">查看</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column v-if="colData[8].istrue" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row.id)" class="el-icon-edit"
                                    style="background-color: #18bc9c;color: #fff;"></el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                    class="el-icon-delete" style="background-color: #f75444;color: #fff;"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                    </el-pagination>
                </div>
                全部
            </el-tab-pane>

            <el-tab-pane label="待审批" @click="Tobereviewed">
                <div v-if="seek">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">

                        <el-form-item label="班级">
                            <el-input v-model="formInline.classandgrade" placeholder="班级"></el-input>
                        </el-form-item>

                        <el-form-item label="用户ID">
                            <el-input v-model="formInline.userid" placeholder="用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-input v-model="formInline.img" placeholder="头像"></el-input>
                        </el-form-item>

                        <el-form-item label="姓名">
                            <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-input v-model="formInline.sex" placeholder="性别"></el-input>
                        </el-form-item>
                        <el-form-item label="审核状态">
                            <el-select v-model="formInline.show" placeholder="选择">
                                <!-- <el-option label="选择" value="选择"></el-option> -->
                                <el-option label="待审批" value="待审批"></el-option>
                                <el-option label="通过" value="通过"></el-option>
                                <el-option label="不通过" value="不通过"></el-option>

                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="所在班级">
                            <el-input v-model="formInline.The_class" placeholder="所在班级"></el-input>
                        </el-form-item> -->
                        <br />

                        <el-form-item>
                            <el-button type="success" @click="inquire" style="background-color: #18bc9c;">提交</el-button>
                            <el-button type="info" @click="replacement"
                                style="background-color: #f4f4f4;color: black;">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-button type="info" :loading="true" size="small"></el-button>
                <el-button type="success" icon="el-icon-plus" size="small" style="background-color: #18bc9c;"
                    @click="dialogVisible = true">添加</el-button>
                <el-button type="success" icon="el-icon-edit" size="small">编辑</el-button>

                <el-button type="danger" icon="el-icon-delete-solid" size="small">删除</el-button>

                <el-button type="info" icon="el-icon-search" plain style="float: right" @click="seek = !seek"
                    size="small"></el-button>
                <el-button-group style="float: right">
                    <el-button type="info" icon="el-icon-s-order" plain size="small"></el-button>

                    <el-button type="info" plain size="small"><el-popover placement="bottom" title="筛选列" trigger="click"
                            width="40">
                            <el-checkbox-group v-model="checkedColumns" size="small">
                                <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item"
                                    :value="item"></el-checkbox>
                            </el-checkbox-group>
                            <div title="筛选列" class="filter-table-col" slot="reference">
                                <i class="el-icon-s-grid"> </i>
                            </div>
                        </el-popover></el-button>
                    <el-button type="info" icon="el-icon-upload2" plain size="small">
                    </el-button>
                </el-button-group>
                <el-input placeholder="搜索" v-model="input" clearable style="width: 195px; float: right" size="small"
                    @change="search(input)">
                </el-input>
                <!-- 表格 -->
                <div class="tableDemo">
                    <el-table :data="tableDatas.slice(
                        (currentPage - 1) * pagesize,
                        currentPage * pagesize
                    )
                        " style="width: 100%">
                        <el-table-column type="selection" align="center"> </el-table-column>
                        <!-- 对数据的处理，最最最重要的一句话 -->
                        <el-table-column v-if="colData[0].istrue" prop="id" label="用户ID" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[1].istrue" prop="classandgrade" label="班级" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[2].istrue" prop="img" label="头像" align="center">
                            <template slot-scope="scope">
                                <el-image style="width: 50px; height: 50px" :src="scope.row.img"
                                    :preview-src-list="[scope.row.img]"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[3].istrue" prop="name" label="姓名" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[4].istrue" prop="phone" label="手机号" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[5].istrue" prop="sex" label="性别" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[6].istrue" prop="show" label="审核状态" sortable align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.show" active-color="#18bc9c" inactive-color="#d2d6de"
                                    active-value="100" inactive-value="0">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[7].istrue" prop="The_class" label="所在班级" sortable align="center">
                        </el-table-column>

                        <el-table-column v-if="colData[8].istrue" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row.id)" class="el-icon-edit"
                                    style="background-color: #18bc9c;color: #fff;"></el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                    class="el-icon-delete" style="background-color: #f75444;color: #fff;"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.length">
                    </el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane label="审批通过" @click="pass">
                <div v-if="seek">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">

                        <el-form-item label="班级">
                            <el-input v-model="formInline.classandgrade" placeholder="班级"></el-input>
                        </el-form-item>

                        <el-form-item label="用户ID">
                            <el-input v-model="formInline.userid" placeholder="用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-input v-model="formInline.img" placeholder="头像"></el-input>
                        </el-form-item>

                        <el-form-item label="姓名">
                            <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-input v-model="formInline.sex" placeholder="性别"></el-input>
                        </el-form-item>
                        <el-form-item label="审核状态">
                            <el-select v-model="formInline.show" placeholder="选择">
                                <!-- <el-option label="选择" value="选择"></el-option> -->
                                <el-option label="待审批" value="待审批"></el-option>
                                <el-option label="通过" value="通过"></el-option>
                                <el-option label="不通过" value="不通过"></el-option>

                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="所在班级">
                            <el-input v-model="formInline.The_class" placeholder="所在班级"></el-input>
                        </el-form-item> -->
                        <br />

                        <el-form-item>
                            <el-button type="success" @click="inquire" style="background-color: #18bc9c;">提交</el-button>
                            <el-button type="info" @click="replacement"
                                style="background-color: #f4f4f4;color: black;">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-button type="info" :loading="true" size="small"></el-button>
                <el-button type="success" icon="el-icon-plus" size="small" style="background-color: #18bc9c;"
                    @click="dialogVisible = true">添加</el-button>
                <el-button type="success" icon="el-icon-edit" size="small">编辑</el-button>

                <el-button type="danger" icon="el-icon-delete-solid" size="small">删除</el-button>

                <el-button type="info" icon="el-icon-search" plain style="float: right" @click="seek = !seek"
                    size="small"></el-button>
                <el-button-group style="float: right">
                    <el-button type="info" icon="el-icon-s-order" plain size="small"></el-button>

                    <el-button type="info" plain size="small"><el-popover placement="bottom" title="筛选列" trigger="click"
                            width="40">
                            <el-checkbox-group v-model="checkedColumns" size="small">
                                <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item"
                                    :value="item"></el-checkbox>
                            </el-checkbox-group>
                            <div title="筛选列" class="filter-table-col" slot="reference">
                                <i class="el-icon-s-grid"> </i>
                            </div>
                        </el-popover></el-button>
                    <el-button type="info" icon="el-icon-upload2" plain size="small">
                    </el-button>
                </el-button-group>
                <el-input placeholder="搜索" v-model="input" clearable style="width: 195px; float: right" size="small"
                    @change="search(input)">
                </el-input>
                <!-- 表格 -->
                <div class="tableDemo">
                    <el-table :data="tableDatass.slice(
                        (currentPage - 1) * pagesize,
                        currentPage * pagesize
                    )
                        " style="width: 100%">
                        <el-table-column type="selection" align="center"> </el-table-column>
                        <!-- 对数据的处理，最最最重要的一句话 -->
                        <el-table-column v-if="colData[0].istrue" prop="id" label="用户ID" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[1].istrue" prop="classandgrade" label="班级" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[2].istrue" prop="img" label="头像" align="center">
                            <template slot-scope="scope">
                                <el-image style="width: 50px; height: 50px" :src="scope.row.img"
                                    :preview-src-list="[scope.row.img]"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[3].istrue" prop="name" label="姓名" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[4].istrue" prop="phone" label="手机号" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[5].istrue" prop="sex" label="性别" sortable align="center">
                        </el-table-column>
                        <el-table-column v-if="colData[6].istrue" prop="show" label="审核状态" sortable align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.show" active-color="#18bc9c" inactive-color="#d2d6de"
                                    active-value="100" inactive-value="0">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colData[7].istrue" prop="The_class" label="所在班级" sortable align="center">
                        </el-table-column>

                        <el-table-column v-if="colData[8].istrue" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row.id)" class="el-icon-edit"
                                    style="background-color: #18bc9c;color: #fff;"></el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                    class="el-icon-delete" style="background-color: #f75444;color: #fff;"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableDatass.length">
                    </el-pagination>
                </div>
            </el-tab-pane>

        </el-tabs>


        <!-- 添加 -->
        <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isfullscreen"
            :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
            :width="width" :class="isminimize ? 'isminimize' : ''" center>
            <div v-show="!isminimize" slot="title" class="medium">
                <span style="color: #fff;float: left;margin-left: 20px;">添加</span>
                <div class="centers"><span>{{ title }}</span></div>
                <div class="icons">
                    <i class="el-icon-minus" style="font-size: 24px" @click="minimize"></i>
                    <i :class="isfullscreen ? 'el-icon-crop' : 'el-icon-full-screen'" style="font-size: 24px"
                        @click="IsFullscreen"></i>
                    <i class="el-icon-close" style="font-size: 24px" @click="closeDialog"></i>
                </div>
            </div>
            <div v-show="isminimize" slot="title" class="horn">
                <div class="lefts"><span>{{ title }}</span></div>
                <div class="centers"><i class="el-icon-full-screen" style="font-size: 24px" @click="minimize"></i></div>
                <div class="rights"><i class="el-icon-close" style="font-size: 24px" @click="closeDialog"></i></div>
            </div>
            <div v-show="!isminimize" class="dialogBody">
                <slot>
                    <el-form ref="form" :model="form" label-width="80px">

                        <el-form-item label="姓名">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="学校名称">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="班级">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="任教科目">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="班主任">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="否"></el-radio>
                                <el-radio label="是"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                                <el-input v-model="form.desc" style="width: 50%;"></el-input><el-button type="primary"
                                    class="el-icon-upload2"
                                    style="background-color: #f75444; color: #fff;">上传</el-button><el-button
                                    class="el-icon-finished" style="background-color: #444c69; color: #fff;">选择</el-button>
                            </el-upload>
                        </el-form-item>

                    </el-form>
                </slot>
            </div>
            <div v-show="!isminimize" v-if="isFooter" class="dialogFooter" style=" background-color: #ecf0f1;">
                <slot name="footer" solt="footer">

                    <div style="margin-right: 70%;">
                        <el-button type="success" style="background-color: #18bc9c;" @click="ok">确定</el-button>
                        <el-button type="success" style="background-color: #18bc9c;" @click="reset">重置</el-button>
                    </div>

                </slot>
            </div>
        </el-dialog>

        <!-- 编辑模态框 -->
        <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isfullscreens"
            :visible.sync="dialogVisibles" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
            :width="width" :class="isminimizes ? 'isminimizes' : ''" center>
            <div v-show="!isminimizes" slot="title" class="medium">
                <span style="color: #fff;float: left;margin-left: 20px;">添加</span>
                <div class="centers"><span>{{ title }}</span></div>
                <div class="icons">

                    <i class="el-icon-minus" style="font-size: 24px" @click="minimizes"></i>
                    <i :class="isfullscreens ? 'el-icon-crop' : 'el-icon-full-screen'" style="font-size: 24px"
                        @click="IsFullscreens"></i>
                    <i class="el-icon-close" style="font-size: 24px" @click="closeDialogs"></i>
                </div>
            </div>
            <div v-show="isminimizes" slot="title" class="horn">
                <div class="lefts"><span>{{ title }}</span></div>
                <div class="centers"><i class="el-icon-full-screen" style="font-size: 24px" @click="minimizes"></i></div>
                <div class="rights"><i class="el-icon-close" style="font-size: 24px" @click="closeDialogs"></i></div>
            </div>
            <div v-show="!isminimizes" class="dialogBody">
                <slot>
                    <el-form ref="form" :model="forms" label-width="80px">

                        <el-form-item label="姓名">
                            <el-input v-model="forms.name"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="forms.phone"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-radio-group v-model="forms.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                                <el-input v-model="forms.desc" style="width: 50%;"></el-input><el-button type="primary"
                                    class="el-icon-upload2"
                                    style="background-color: #f75444; color: #fff;">上传</el-button><el-button
                                    class="el-icon-finished" style="background-color: #444c69; color: #fff;">选择</el-button>
                            </el-upload>
                        </el-form-item>
                        <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" style="width: 50%;"
                            :on-preview="handlePreview" :on-remove="handleRemove" :file-list="forms.img" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload> -->
                    </el-form>
                </slot>
            </div>
            <div v-show="!isminimizes" v-if="isFooter" class="dialogFooter" style=" background-color: #ecf0f1;">
                <slot name="footer" solt="footer">

                    <div style="margin-right: 70%;">
                        <el-button type="success" style="background-color: #18bc9c;" @click="oks">确定</el-button>
                        <el-button type="success" style="background-color: #18bc9c;" @click="resets">重置</el-button>
                    </div>

                </slot>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { Teacher } from "../../request/api.js";
// import elDragDialog from "@/utils/el-dragDialog"

export default {
    // directives: {
    //     elDragDialog
    // },

    data() {
        return {
            disabled:false,
            accountRecordId:[],
            currentPage: 1, //初始页
            pagesize: 5, //    每页的数据
            input: "",
            seek: false,
            seeks: false,
            tableData: [],
            tableDatas: [],
            tableDatass: [],

            formInline: {
                classandgrade: '',
                userid: "",
                img: '',
                name: '',
                phone: '',
                sex: '',
                show: ''
                // The_class: ''
            },
            colData: [
                { title: "用户ID", istrue: true },
                { title: "班级", istrue: false },
                { title: "头像", istrue: true },
                { title: "姓名", istrue: true },
                { title: "手机号", istrue: true },
                { title: "性别", istrue: true },
                { title: "审核状态", istrue: true },
                { title: "所在班级", istrue: true },
                { title: "操作", istrue: true },
            ],

            // 多选框的列表，列出表格的每一列
            checkBoxGroup: [
                "用户ID",
                "班级",
                "头像",
                "姓名",
                "手机号",
                "性别",
                "审核状态",
                "所在班级",
                "操作"
            ],
            // 当前选中的多选框，代表当前展示的列
            checkedColumns: [
                "用户ID",
                "班级",
                "头像",
                "姓名",
                "手机号",
                "性别",
                "审核状态",
                "所在班级",
                "操作"
            ],
            //   添加弹窗
            isfullscreen: false, // 全屏
            isminimize: false, // 最小化
            dialogVisible: false, // 隐藏弹窗
            //编辑弹窗
            isfullscreens: false, // 全屏
            isminimizes: false, // 最小化
            dialogVisibles: false, // 隐藏弹窗

            // 弹窗内表单
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },

            forms: {
                name: '',
                phone: '',
                sex: '',
                img: '',
                // fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]

            }


        };
    },
    created() {
        Teacher().then((res) => {
            // console.log(res);

            this.tableData = res.data;
            // console.log(this.array);
        });
        Teacher().then((res) => {
            let data = res.data;
            let array = []
            for (let i = 0; i < data.length; i++) {

                if (data[i].show == '0') {
                    array.push(data[i])
                }
            }
            this.tableDatas = array
        });
        Teacher().then((res) => {
            let data = res.data;
            let array = []
            for (let i = 0; i < data.length; i++) {
                if (data[i].show == '100') {
                    array.push(data[i])
                }
            }
            this.tableDatass = array
        });

    },

    // 添加
    props: {
        width: {
            type: String,
            default: '50%'
        },
        title: {
            type: String,
            default: ''
        },
        isFooter: { // 是否显示脚部
            type: Boolean,
            default: true
        }
    },
    watch: {
        checkedColumns(val) {
            let arr = this.checkBoxGroup.filter((i) => !val.includes(i));
            this.colData.filter((i) => {
                if (arr.indexOf(i.title) != -1) {
                    i.istrue = false;
                } else {
                    i.istrue = true;
                }
            });
            this.reload = Math.random();
        },

        // 添加弹窗
        dialogVisible(val) {
            if (val) {
                const el = this.$refs.xhzqDialog.$el.querySelector('.el-dialog')
                el.style.left = 0
                el.style.top = 0
            }
        }
    },

    mounted() { },

    methods: {
        onSubmit() {
            console.log("submit!");
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange(size) {
            this.pagesize = size; //将每页显示的条数 = 改变的值
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage; //然后将当前页 = 改变的值
            console.log(this.currentPage); //点击第几页
        },
        formatter(row, column) {
            return row.address;
        },
        // 添加弹窗
        // 最小化
        minimize() {
            this.isminimize = !this.isminimize
            if (this.isfullscreen) this.isfullscreen = !this.isfullscreen
        },
        // 关闭弹窗
        closeDialog() {
            this.dialogVisible = false
        },
        // 打开弹窗
        openDialog() {
            this.dialogVisible = true
        },
        // 全屏
        IsFullscreen() {
            this.isfullscreen = !this.isfullscreen
            if (this.isfullscreen) this.$emit('isfullscreen')
        },

        //修改弹窗
        // 最小化
        minimizes() {
            this.isminimizes = !this.isminimizes
            if (this.isfullscreens) this.isfullscreens = !this.isfullscreens
        },
        // 关闭弹窗
        closeDialogs() {
            this.dialogVisibles = false
        },
        // 打开弹窗
        openDialogs() {
            this.dialogVisibles = true
        },
        // 全屏
        IsFullscreens() {
            this.isfullscreens = !this.isfullscreens
            if (this.isfullscreens) this.$emit('isfullscreens')
        },
        // 重置
        ok() {
            this.dialogVisible = false;
            this.$message.success('操作成功');
        },
        reset() {
            this.dialogVisible = false;
            this.$message.success('操作成功');
        },
        oks() {
            this.dialogVisibles = false;
            this.$message.success('操作成功');
        },
        resets() {
            this.dialogVisibles = false;
            this.$message.success('操作成功');
        },
        // 删除
        handleDelete(a, b) {
            alert(a + 1, b)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 查询
        inquire() {
            Teacher().then((res) => {
                let data = res.data;
                let array = []
                for (let i = 0; i < data.length; i++) {
                    if (this.formInline.userid == data[i].id || this.formInline.classandgrade == data[i].classandgrade || this.formInline.img == data[i].img || this.formInline.name == data[i].name || this.formInline.phone == data[i].phone || this.formInline.sex == data[i].sex || this.formInline.show == data[i].show || this.formInline.The_class == data[i].The_class) {
                        array.push(data[i])
                    }
                }
                this.tableData = array
            });
        },
        replacement() {
            this.formInline.userid = '',
                this.formInline.classandgrade = '',
                this.formInline.img = '',
                this.formInline.name = '',
                this.formInline.phone = '',
                this.formInline.sex = '',
                this.formInline.show = '',
                this.$router.go(0)
        },
        search(input) {
            Teacher().then((res) => {

                var newList = []
                res.data.forEach(item => {
                    if (item.id.indexOf(input) != -1 || item.name.indexOf(input) != -1 || item.sex.indexOf(input) != -1 || item.show.indexOf(input) != -1 || item.phone.indexOf(input) != -1) {
                        newList.push(item)
                    }
                })

                return this.tableData = newList

            });
        },
        handleEdit(a, b) {
            let id = a + 1
            this.dialogVisibles = true
            Teacher().then((res) => {
                let data = res.data;
                let array = {}
                for (let i = 0; i < data.length; i++) {
                    if (id == data[i].id) {
                        array = data[i]
                    }
                }
                this.forms.name = array.name,
                    this.forms.phone = array.phone,
                    this.forms.sex = array.sex,
                    this.forms.img = array.img
            });

        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },

        //待审核
        Tobereviewed() {

        },
        pass() {
            alert('1')
            console.log('1');
        },

        handleSelectionChange(val) {
            console.log(val);
            val.map((item, index) => {
                //  this.accountRecordId 为自己定义的值
                this.accountRecordId.push(item.id)
            });
            console.log(this.accountRecordId);
        },
    },

    // 添加弹窗
    directives: {
        dialogDrag: {
            bind(el, binding, vnode, oldVnode) {
                const dialogHeaderEl = el.querySelector('.el-dialog__header')
                const dragDom = el.querySelector('.el-dialog')
                dialogHeaderEl.style.cursor = 'move'
                // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
                const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
                // const fixedX =
                // const fixedY =
                dialogHeaderEl.onmousedown = (e) => {
                    // 判断当前是否为全屏状态
                    const path = event.path || (event.composedPath && event.composedPath())
                    const isFull = path.find(s => {
                        if (s.className === undefined) {
                            return false
                        } else {
                            return s.className.indexOf('is-fullscreen') > -1
                        }
                    })
                    if (isFull !== undefined) {
                        return
                    }
                    const isMinix = path.find(s => {
                        if (s.className === undefined) {
                            return false
                        } else {
                            return s.className.indexOf('isminimize') > -1
                        }
                    })
                    if (isMinix !== undefined) {
                        return
                    }
                    // 鼠标按下，计算当前元素距离可视区的距离
                    const disX = e.clientX - dialogHeaderEl.offsetLeft
                    const disY = e.clientY - dialogHeaderEl.offsetTop

                    // 获取到的值带px 正则匹配替换
                    let styL, styT

                    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                    if (sty.left.includes('%')) {
                        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
                    } else {
                        styL = +sty.left.replace('px', '')
                        styT = +sty.top.replace('px', '')
                    }

                    document.onmousemove = function (e) {
                        // 通过事件委托，计算移动的距离
                        const l = e.clientX - disX
                        const t = e.clientY - disY
                        // 移动当前元素
                        dragDom.style.left = `${l + styL}px`
                        dragDom.style.top = `${t + styT}px`
                        // const dom = e.path.find(s => s.querySelector('.el-dialog')).children[0]
                        //
                        // if (dom.offsetTop < 0) {
                        //   dragDom.style.top = `0px`
                        // }
                        // if (dom.offsetLeft < 0) {
                        //   dragDom.style.left = `0px`
                        // }

                        // 将此时的位置传出去
                        // binding.value({x:e.pageX,y:e.pageY})
                    }

                    document.onmouseup = function (e) {
                        const dragDom = el.querySelector('.el-dialog')
                        const offsetLeft = dragDom.offsetLeft
                        const offsetTop = dragDom.offsetTop
                        const left = Number(dragDom.style.left.replace('px', ''))
                        const top = Number(dragDom.style.top.replace('px', ''))
                        const windowWidth = window.innerWidth
                        const windowHeight = window.innerHeight - 50
                        const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth
                        const offsetBottom = offsetTop + dragDom.offsetHeight - windowHeight
                        if (offsetLeft < 0) {
                            dragDom.style.left = (left - offsetLeft) + 'px'
                        }
                        if (offsetTop < 0) {
                            dragDom.style.top = (top - offsetTop) + 'px'
                        }
                        if (offsetRight > 0) {
                            dragDom.style.left = (left - offsetRight) + 'px'
                        }
                        if (offsetBottom > 0) {
                            dragDom.style.top = (top - offsetBottom) + 'px'
                        }
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                }
            }
        }
    },
};
</script>

<style lang="scss" >
.el-dialog {
    margin-top: 10vh !important;
}

.no_select {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently */
}

.isminimize {
    left: 20px;
    bottom: 20px;
    top: auto;
    right: auto;
    overflow: hidden;

    .el-dialog {
        margin: 0 !important;
        width: 240px !important;
        height: 40px;
        top: 0 !important;
        left: 0 !important;
    }

    .el-dialog__header {
        cursor: auto !important;

        .el-dialog__headerbtn {
            display: none;
        }
    }

    .dialogFooter {
        position: absolute;
        bottom: 0;

    }
}

.xhzqDialog {
    .is-fullscreen {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
        overflow: hidden;
        position: relative;

        .el-dialog__header {
            cursor: auto !important;
        }

        .el-dialog__body {
            height: 100%;

            .dialogBody {
                height: 100% !important;
                max-height: none !important;
                padding-bottom: 120px !important;
            }
        }

        .dialogFooter {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #fff;
        }
    }

    .el-dialog {
        .el-dialog__header {
            width: 100%;
            padding: 5px 0px 5px !important;
            // border:1px solid red;
            display: flex;
            background-color: #2c3e50;
            border-bottom: 1px solid #ffffff;
            @extend .no_select;
            cursor: auto;

            .medium {
                width: 100%;
                height: 100%;
                display: flex;

                div {
                    flex: 1;
                }

                .centers {
                    span {
                        text-align: center;
                        font-size: 16px;
                        color: #606266;
                    }
                }

                .icons {
                    display: flex;
                    justify-content: flex-end;

                    i {
                        color: #ffffff;
                        font-size: 18px !important;
                        display: block;
                        padding: 0 7px;
                    }

                    i:hover {
                        background: #f19999;
                        cursor: pointer;
                    }

                    .el-icon-close:hover {
                        background: #f00;
                        color: #fff;
                    }
                }
            }

            .horn {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;

                div {
                    i {
                        color: #5f6368;
                        font-size: 20px !important;
                    }
                }

                .lefts {
                    flex: 4;
                    margin-top: 3px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    span {
                        font-size: 16px;
                        color: #606266;
                    }
                }

                .centers {
                    flex: 1;
                }

                .rights {
                    flex: 1;
                }

                i:hover {
                    cursor: pointer;
                    color: #000;
                }
            }

            .el-dialog__headerbtn {
                top: 0;
                font-size: 24px;
            }
        }

        .el-dialog__body {
            padding: 1px !important;

            .dialogBody {
                max-height: calc(80vh - 50px);
                box-shadow: inset 0px -2px 10px 1px #ffffff;
                overflow: auto;
                padding: 20px 25px 20px;
                background: #ffffff;

                &::-webkit-scrollbar {
                    width: 4px;
                    height: 8px;
                }

                &::-webkit-scrollbar-thumb {
                    background: transparent;
                    border-radius: 4px;
                }

                &:hover::-webkit-scrollbar-thumb {
                    background: hsla(0, 0%, 53%, .4)
                }

                &:hover::-webkit-scrollbar-track {
                    background: hsla(0, 0%, 53%, .1)
                }
            }

            .dialogFooter {
                padding: 10px 15px;
                border-top: 1px solid #ecf0f1;
                text-align: right;

                .el-button {
                    padding: 7px 15px;
                }
            }
        }
    }

    .xhzqDialog {

        // display: flex;
        // justify-content: center;
        .el-select {
            width: 100%;
        }

        .el-date-editor {
            width: 100%;
        }
    }
}
</style>